<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>支付</title>
    <link rel="icon " href="icon/favicon.ico">

    <!--css代码-->
    <link href="css/market.css" rel="stylesheet" type="text/css">
    <!--jquery库-->
    <script src="js/jquery-3.3.1.js"></script>
    <!--js代码-->
    <script src="js/common.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/js/distpicker.data.js"></script>
    <script type="text/javascript" src="js/js/distpicker.js"></script>
    <script type="text/javascript" src="js/js/main.js"></script>
</head>
<body>
<div class="payResult">
    <img src="icon/完成.png"><br>
    <label>支付成功！</label>
    <a href="index.html"><input type="button" value="继续购物" style="color: red;float: left; margin-left: 30px"></a>
    <a href="order.html"><input type="button" value="进入订单中心" style="float: right;margin-right: 30px"></a>
</div>

    <div class="headerBar">
        <div class="topBar">
            <div class="comWidth">
                <div class="leftArea">
                    <a id='hello'  href="login.html" class="link-login">您好，<span>请登录</span></a>&nbsp;&nbsp;
                    <a id='hello2' href="registe.html" class="link-regist style-red">免费注册</a>
                </div>
                <div class="rightArea">

                    <ul class="fr">
                        <span class="fore1" ><a target="_blank" href="shopcar.html" style="text-align: center"><img class='shopCar' src="icon/shopCar.png">购物车</a></span>
                        <span class="fore1" ><a target="_blank" href="order.html">我的订单</a></span>
                        <span class="fore1" ><a href="account.html">个人中心</a></span>
                    </ul>
                </div>
            </div>
        </div><!--topBar结束-->

        <div class="logoBar">
            <div class="comWidth">
                <div class="logo fl">
                    <a href="index.html"><img class='company_logo'src="images/logo.jpg" alt="XX网"/></a>
                </div>
                <div class="stepBox fr">
                    <div class="steps">
                        <div class="first">
                            <div class="title">
                                购物车
                            </div>
                            <div class="big-circle">
                                <div class="min-circle round_active">
                                    √
                                </div>
                            </div>
                            <div class="big-line">
                                <div class="min-line line_active"></div>
                            </div>
                        </div>
                        <div class="second">
                            <div class="title">
                                填写核对订单信息
                            </div>
                            <div class="big-circle">
                                <div class="min-circle round_active">
                                    √
                                </div>
                            </div>
                            <div class="big-line">
                                <div class="min-line line_active"></div>
                            </div>
                        </div>
                        <div class="third">
                            <div class="title">
                                成功提交订单
                            </div>
                            <div class="big-circle">
                                <div class="min-circle round_active">
                                    √
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--logoBar结束-->
    </div>

    <div class="orderInfo">
        <p style="float: left; margin-left: 30px; width: 400px;">订单提交成功，请尽快付款！订单号：<label>83590513794</label></p>
        <p style="float: right;  ">应付金额：<label style="color: red">25.0</label>元</p>
        <p style="float: left; width: calc(100% - 200px); margin-left: 30px">请您在<b style="color: red">24小时</b>内完成支付，否则订单会被自动取消(库存紧俏订单请参见详情页时限)</p>
        <span style="float: right;margin-right: 30px;margin-top: 10px; color: #1D7AD9 "><a class='showList'href="javascript:;" style="color: #1D7AD9">订单详情</a></span>
        <!--<div class="goodsList">-->
            <!--<label></label>-->
        <!--</div>-->
        <br><br><br><br><br><br>
        <div class="address" style="display: none">
            <div class="selectAddress">
                <input  disabled="true" value="收货人信息:" style="opacity: 0.8">
                <label>梁恒</label>
                <label>四川省</label>
                <label>成都市</label>
                <label> 成华区 城区 一环路东一段电子科技大学沙河校区-欣苑学生公寓</label>
                <label class="phone">15229788361</label>
            </div>
            <div class="goodsList">
                <input  disabled="true" value="商品名称:">
                <label>计算机组成原理 高等教育出版社 第三部 罗克著</label>
            </div>
        </div>
    </div>

    <div class="payment">
        <div class="wechatPay active">
            <input type="checkbox" style="width: 20px;height: 20px;margin-bottom: 15px; line-height: 50px;top: 15px"checked="true">
            <img src="icon/微信支付.png">
            <label style="height: 20px; line-height: 30px; text-align: center; margin-left: 10px;margin-bottom: 10px ">微信支付</label>
        </div>
        <div class="AliPay">
            <input type="checkbox" style="width: 20px;height: 20px;">
            <img src="icon/支付宝.png">
            <label style="height: 20px; line-height: 30px; text-align: center; margin-left: 10px; ">支付宝支付</label>
        </div>
        <div class="CardPay">
            <input type="checkbox" style="width: 20px;height: 20px;">
            <img src="icon/银联.png">
            <label style="height: 20px; line-height: 30px; text-align: center; margin-left: 10px; ">银行卡支付</label>
        </div>

        <div class="pwd">
            <label style="margin-left: 100px">请输入6位支付密码:</label>
            <div class="pwdArea">
                <input class="pwdInput" type="password">
                <input class="pwdInput" type="password">
                <input class="pwdInput" type="password">
                <input class="pwdInput" type="password">
                <input class="pwdInput" type="password">
                <input style="border-right: none" class="pwdInput" type="password">
            </div>
            <input class='pay' type="button" value="立即支付" style="color: white; background-color: red; width: 200px; height: 50px;margin-left: 100px; margin-top: 30px; margin-bottom: 30px">
        </div>
    </div>


    <div class="back-to-top" style="display:none"><a>返回<br />顶部</a></div>

    <div class="footer">
        <p><a href="#">网站简介</a><i>|</i><a href="#">公告</a><i>|</i> <a href="#">招纳贤士</a><i>|</i> <a href="#">联系我们</a><i>|</i>客服热线：400-675-1234</p>
        <p>Copyright &copy; 2007 - 2018 版权所有&nbsp;&nbsp;&nbsp;京ICP备09037834号&nbsp;&nbsp;&nbsp;京ICP证B1034-8373号&nbsp;&nbsp;&nbsp;某市公安局XX分局备案编号：123456789123</p>
    </div>

</body>
</html>

<script>
    jQuery(function ($) {
        //当滚动条的位置处于距顶部20像素以下时，跳转链接出现，否则消失
        $(window).scroll(function(){
            if (jQuery(window).scrollTop()>20){
                jQuery(".back-to-top").fadeIn(2000);
            }
            else
            {
                jQuery(".back-to-top").fadeOut(2000);
            }
        });

        //当点击跳转链接后，回到页面顶部位置

        jQuery(".back-to-top").click(function(){
            jQuery('body,html').animate({scrollTop:0},200);
            return false;
        });
    });
    $(document).ready(function () {
        var name=sessionStorage.getItem('name');
        if(name!==null&&(name)!==undefined){
            if((/^[a-zA-Z0-9]{6,11}$/).test(name)){
                $('#hello2').hide();
                $('#hello  ').html('您好，'+name);
            }
        }
    })

    $('.showList').click(function () {
        $('.address').slideToggle();
    })

    $('.pwdInput').keydown(function (event) {
        var char = event.which || event.keyCode;
        if($(this).val()==''||$(this).val()==null){
            if(char==13||char==8){
                $(this).prev().focus()
            }
            setTimeout(function () {
                $(this).val('')
                $(this).focus()
            }, 100)

        }
        else{
            if((/^[0-9]{1}$/).test($(this).val())){

                if($(this).is($('.pwdInput:eq(5)'))){
                    $(this).val('')
                    $(this).focus()
                }
                else{
                    if(char==13||char==8){
                        $(this).val('')
                        $(this).focus()
                    }
                    else{
                        $(this).next().focus()
                    }

                }

            }
            else{
                $(this).val('')
                setTimeout(function () {
                    $(this).focus()
                }, 10)
            }
        }

    })

    $('.pay').click(function () {
        var pwd='';
        $('.pwdInput').each(function (idx,val) {
            var pwdi=$('.pwdInput:eq('+idx+')').val()
            pwd+=pwdi
        })
        // alert(pwd)
        $.ajax({
            type: 'post',
            url:'shopcar.json',
            dataType:'json',
            data:{'password':pwd},
            success:function () {
                if(pwd=="123456"){
                    $('.payResult').show()
                }
            }
        })


    })

</script>